<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            .div{
                width: 300px;    /*宽度*/
                height: 100px;   /*高度*/
                margin: 200px auto;  /*框架顶部200px，居中*/
                border: white solid 2px;  /*框架 边白色 直线 2px宽*/
                font-size: 50px;   /*字边成50px*/
                text-align: center; /*数字居中*/
                line-height: 100px;  /*垂直100px*/
                color: red;  /*颜色红色*/
            }
            .div_a{
                width: 300px;  /*宽度*/
                height:30px;    /*高度*/
                margin: -200px auto;  /*第二个框架距离第一个框架的距离*/
                border: white solid 2px; /*框架 颜色 直线 宽度*/
            }
            button{
                margin-left:40px;  /*按钮距离框架左侧的距离*/
            }

        </style>
    </head>
    <body>
         <div  class="div" id="box_id">
              00:00:00
         </div>
         <div class="div_a">
             <button id="a_id">开始</button>
             <button id="b_id">重置</button>
             <button id="c_id">停止</button>
         </div>
    </body>
    <script>
        var tm = 1;
        var mm=1;
        var m="00";
        var hh=1;
        var h="00"
        var box = document.getElementById("box_id"); //获取div
        var button_a=document.getElementById("a_id");//获取开始按钮
        var button_b=document.getElementById("c_id") //获取停止按钮
        var button_c=document.getElementById("b_id")//获取重置按钮
        button_a.onclick=function(){                //单击事件
              terval= setInterval(                  //轮询
                  function(){                       //定义函数
                      if(tm<10){                    //判断tm是否小于10
                          t="0"+tm;                 //如果小于10 把0tm 赋值给t
                      }else{
                          t=tm;                      //否则把tm赋值给t
                      }
                      box.innerText= h+":"+ m+":"+t;    //输出00：m：t
                      if(tm===60){                        //判断tm是否定于60
                          if(mm<=9){                         //如果等于60 再判断m是否小于10
                              m="0"+mm;                      //如果小于10 把0mm 赋值给m
                          }else{
                              m=mm;                           //否则把mm赋值给m
                          }
                          mm+=1;                         //mm自加1
                          tm=0;
                      }
                      if(tm===0 ) {
                          t = "00";
                          box.innerText = h + ":" + m + ":" + t;
                      }
                      if(mm===61){                        //判断tm是否定于60
                          if(h<=9){                         //如果等于60 再判断m是否小于10
                              h="0"+hh;                      //如果小于10 把0mm 赋值给m
                          }else{
                              h=hh;                           //否则把mm赋值给m
                          }
                          hh+=1;                         //mm自加1
                          mm=0;
                      }
                      if(mm===0 ){
                          m="00";
                          box.innerText= h+":"+m+":"+t;    //如果tm等于0 这显示这个
                      }
                      // box.innerText="00:"+m+":"+t;
                      tm+=1;                     // tm自加一
                  },15              //1000毫秒
              )
            }
        button_b.onclick = function() {          // 停止按钮的单机事件
              clearTimeout(terval);           //停止
         }
        button_c.onclick = function(){      // 重置按钮的单机事件
            clearTimeout(terval);              //停止
            box.innerText= "00:00:00"          //显示00:00:00
            m="00";                           //M为00
            tm=0;                            //tm为0
            mm=0;
            h="00";                         //h为00
        }
    </script>
</html>